<template>
  <van-nav-bar title="标题" left-text="返回" left-arrow
               @click-left="onClickLeft"
               @click-right="onClickRight">
    <template #right>
      <van-icon name="search" size="18" />
    </template>
  </van-nav-bar>

<!--  <div id="content">
    <template v-if="active === 'index'">
      <Index />
    </template>

    <template v-if="active === 'searchitems'">
      <SearchItems />
    </template>

    <template v-if="active === 'usercenter'">
      <Usercenter />
    </template>
  </div>-->
  <div id="content">
    <router-view />
  </div>

<!--  <van-tabbar v-model="active">
    <van-tabbar-item icon="home-o" name="index">主页</van-tabbar-item>
    <van-tabbar-item icon="search" name="searchitems">搜索</van-tabbar-item>
    <van-tabbar-item icon="friends-o" name="usercenter">个人中心</van-tabbar-item>
  </van-tabbar>-->

  <van-tabbar route>
    <van-tabbar-item replace to="/" icon="home-o">主页</van-tabbar-item>
    <van-tabbar-item replace to="/searchitems" icon="search">搜索</van-tabbar-item>
    <van-tabbar-item replace to="/usercenter" icon="friends-o">个人中心</van-tabbar-item>
  </van-tabbar>


</template>

<script>
import { ref } from 'vue';
import { useRouter } from 'vue-router';

export default {
/*  components: {SearchItems, Usercenter, Index},*/
  setup() {
/*    const onClickLeft = () => alert('left');*/
    const router = useRouter();

    const onClickLeft = () =>{
      router.push('/');
    };
/*    const onClickRight = () => alert('right');*/
    const onClickRight =() =>{
      router.push('/search');
    };

    const active = ref('index');

    return {
      onClickLeft,
      onClickRight,
      active,
    };
  },
}
</script>

<style scoped>

</style>